<template>
  <el-table
    :data="data"
    v-bind="config"
    v-loading="config.loading"
    v-on="config"
  >
    <el-table-column v-if="config.selection" type="selection" width="55" />
    <el-table-column v-if="config.showIndex" type="index" />
    <template v-for="column in columns" :key="column.prop">
      <el-table-column v-if="column.slot" v-bind="column">
        <template #default="scoped">
          <slot :name="column.slot" :scoped="scoped" :row="scoped.row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-else-if="column.expand" type="expand" v-bind="column">
        <template #default="scoped">
          <slot :scoped="scoped" :row="scoped.row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-else-if="column.image" v-bind="column">
        <template #default="scoped">
          <el-image
            style="width: 110px; height: 110px"
            :src="scoped.row[column.image]"
            :preview-src-list="
              scoped.row.previewUrls || [scoped.row[column.image]]
            "
            :initial-index="4"
            :z-index="9999"
            preview-teleported
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column v-else v-bind="column" />
    </template>
  </el-table>
  <div class="pagination">
    <el-pagination
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.size"
      :total="pagination.total"
      :pageSizes="[10, 20, 30, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import type { ITableColumn } from "@/types/queryTable";
const props = withDefaults(
  defineProps<{
    data: {
      [propName: string]: any;
    }[];
    columns: ITableColumn[];
    config: {
      [propName: string]: any;
    };
    pagination: {
      [propName: string]: any;
    };
  }>(),
  {
    data: () => [],
    columns: () => [],
    config: () => ({}),
    pagination: () => ({}),
  }
);

const emits = defineEmits<{
  (e: "paginationChange"): void;
}>();
const handleSizeChange = (value: number) => {
  props.pagination.page = 1;
  emits('paginationChange')
};
const handleCurrentChange = (value: number) => {
  emits('paginationChange')
};
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
